import {  Checkbox, List, NoticeBar } from "antd-mobile";


function Person({ selectPerson,  rider, setSelectPerson }) {
  return (
    <div>
                当前车票的乘车人：
            
                <List>
                    {rider.map((item, index) => (
                        <List.Item
                            key={index}
                            extra={
                                <Checkbox
                                    onChange={(checked) => {
                                        const nselectPerson = [...selectPerson];
                                        if (checked) {
                                            nselectPerson.push(item);
                                        } else {
                                            const index = nselectPerson.findIndex(person =>person.id === item.id);
                                            nselectPerson.splice(index, 1);
                                        }
                                        setSelectPerson(nselectPerson);
                                    }}
                                />
                            }
                        >
                            {item.name}
                        </List.Item>
                    ))}
                </List>
            </div>
  )
}

export default Person
